<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/calendar.css">
		<link rel="stylesheet" href="../css/mobile_date.css">
		<link rel="stylesheet" href="../css/font-awesome.min.css">

		<style type="text/css">
			html {
				font: 500 14px 'roboto';
				color: #333;
				background-color: #fafafa;
			}
			
			a {
				text-decoration: none;
			}
			
			ul,
			ol,
			li {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			
			#demo {
				width: 100%;
				height: 400px;
			}
			
			p {
				margin: 0;
			}
			
			#dt {
				margin: 30px auto;
				height: 28px;
				width: 200px;
				padding: 0 6px;
				border: 1px solid #ccc;
				outline: none;
			}
		</style>
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
			
			.oa-contact-avatar {
				width: 75px;
			}
			
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			
			.oa-contact-content {
				width: 100%;
			}
			
			.oa-contact-name {
				margin-right: 20px;
			}
			
			.oa-contact-name,
			oa-contact-position {
				float: left;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="../index.html" class="mui-icon-arrowleft mui-icon"></a>

			<h1 class="mui-title">工单查询</h1>
		</header>
		<div class="mui-content">

			<div class="box">
				<section class="date">
					<div class="head">
						<div class="prev">上一月</div>
						<div class="tomon"><span class="year"></span>年 <span class="month"></span>月</div>
						<div class="next">下一月</div>
					</div>
					<div class="type">
						<li>
							<p>总工单</p>
							<p>0</p>
						</li>
						<li>
							<p>工作单</p>
							<p>0</p>
						</li>
						<li>
							<p>服务单</p>
							<p>0</p>
						</li>
						<li>
							<p>星级单</p>
							<p>0</p>
						</li>
					</div>
					<ol>
						<li>周日</li>
						<li>周一</li>
						<li>周二</li>
						<li>周三</li>
						<li>周四</li>
						<li>周五</li>
						<li>周六</li>
					</ol>
					<ul>
						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>

						<li>
							<a>日期</a>
						</li>
						<li>
							<a>日期</a>
						</li>
						<li>
							<a>日期</a>
						</li>
						<li>
							<a>日期</a>
						</li>

					</ul>
				</section>
				<div id="popover" class="mui-popover">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<p>title</p>
							<p>describe</p>
						</li>
						<li class="mui-table-view-cell">
							<p>title</p>
							<p>describe</p>
						</li>

					</ul>
				</div>
			</div>

		</div>

	</body>
	<script src="../js/jquery.js"></script>

	<script src="../js/mui.min.js"></script>
	<script src="../js/mobile_date.js"></script>

	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	</script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		(function($) {
			$('#scroll').scroll({
				indicators: true //是否显示滚动条
			});
			var segmentedControl = document.getElementById('segmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if(this.checked) {
					var styleEl = document.querySelector('input[name="style"]:checked');
					var colorEl = document.querySelector('input[name="color"]:checked');
					if(styleEl && colorEl) {
						var style = styleEl.value;
						var color = colorEl.value;
						segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
					}
				}
			});
		})(mui);
	</script>

</html>